<template>
  <div>
    <div class="bgt">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt=""/>
    </div>

    <div class="content">
        <div class="tx">
          <img :src="userinfo.avatar" alt=""/>
        </div>

        <div class="golog">
          <p>{{userinfo.nickname}}</p>
          <van-button  type="primary"  @click="outFn">{{login}}</van-button>
          <div v-show="isShow">编辑个人资料></div>
        </div>
      </div>
 

    <div class="grid">
      <van-grid :border="false" :column-num="3">
        <van-grid-item to="./collect" icon="star-o" text="我的收藏" />
        <van-grid-item to="./manage" icon="wap-home-o" text="我的出租" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="idcard" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>

    <div class="imgS">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
    <van-dialog v-model="show" title="是否确认退出？" @confirm="sureFn" show-cancel-button>
</van-dialog>
  </div>
  
</template>

<script>
import {getUser } from '@/api/user'
import {delToken} from '@/utils/storage'
export default {
  data(){
    return {
      userinfo: {
        nickname:'游客',
        avatar:"http://liufusong.top:8080/img/profile/avatar.png"
      },
      login:'去登录',
      status:'',
      show:false,
      isShow:false
    }
  },
 async created(){
      const res = await getUser()
      console.log(res);
  if(res.body){
      this.userinfo = res.body
      this.userinfo.avatar="http://121.199.51.160:8080/img/avatar.png"
      this.login = '退出'
      this.isShow= true
  }
  },
  methods:{
    outFn(){
      if(this.login === '退出'){
        this.show = true
      }else {
        this.$router.push('/login')
      }
    },
    sureFn(){
      this.isShow = false
      this.userinfo ={
        nickname:'游客',
        avatar:"http://liufusong.top:8080/img/profile/avatar.png"
      },
      this.login ='去登录',
      delToken()
    }
  }
};
</script>

<style>
.bgt {
  width: 100%;
}
.bgt img {
  width: 100%;
}
.tx{
  margin: 0 auto;
  width: 70px;
  height: 70px;
  transform: translate(0,-35px);
  border: 7px solid #fff;
  border-radius: 50%;
  box-shadow: 0px 2px 3px #ccc;
}
.golog{
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(0,-40px);
  align-items: center;
}
.golog p {
  text-align: center;
}
.golog div{
  align-items: center;
  font-size: 12px;
  /* color: #999; */
}
.golog .van-button{
  height: 30px;
  width: 75px;
  margin: 0 auto;
}
.content {
  width: 90%;
  margin-left: 20px;
  transform: translate(0,-60px);
  background-color: #fff;
  box-shadow: 0 0 10px #ccc;
}
.tx img{
  width: 100%;
  height: 100%;
}
.grid{
  transform: translate(0,-50px);
  margin-bottom: 15px;
}
.imgS img{
  width: 92%;
  transform: translate(0,-50px);
  margin-bottom: 30px;
  margin-left: 15px;
}
</style>
